<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

let chart = ref();

function chartInit() {
  let myChart = echarts.init(chart.value);

  let option = {
    xAxis: {
      data: ["1", "2", "3", "4", "5", "6", "7"],
      type: "category",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          color: "rgba(127,127,127,.3)",
        },
      },
    },
    series: [
      {
        type: "line",
        smooth: true,
        data: [323, 523, 444, 555, 209, 220, 200],
        areaStyle: {
          //区域颜色  线性渐变
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "rgba(255,255,255,.7)" },
                { offset: 1, color: "rgba(100,100,100,.1)" },
              ],
            },
          },
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
onMounted(() => {
  chartInit();
});
</script>

<template>
  <div>
    <div cl="title">标题</div>
    <div ref="chart" style="width: 100%; height: 230px"></div>
  </div>
</template>

<style scoped></style>
